<template>
	<div class="table-action clearfix" :style="actionWidth" @mouseleave.stop="onLeave" @mouseenter.stop="onEnter" @click="onClick">
		<div :style="innerWidth" class="table-action-inner">
			<div class="table-action-item">
				<slot></slot>
			</div>
			<div class="table-action font">
				{{title}}
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		props: {
			width: {
				type: Number,
				default: 40
			},
			title: {
				type: String,
				required: true
			},
			url: {
				type: String
			}
		},
		data() {
			return {
				translate: 0
			}
		},
		methods: {
			onClick() {
				if (this.url && this.$router) {
					this.$router.push(this.url);
				}
				this.$emit('click')
			},
			onLeave() {
				this.translate = 0;
			},
			onEnter() {
				this.translate = -50;
			}
		},
		computed: {
        	actionWidth() {
        		return {
        			width: this.width + 'px',
        		}
        	},
        	innerWidth() {
        		return {
        			width: this.width * 2 + 'px',
        			transform: `translateX(${this.translate}%)`
        		}	
        	}
        }
	}
</script>
<style lang="scss">
	.table-action {
		display: inline-block;
		overflow: hidden;
		cursor: pointer;
		vertical-align: middle;
		.table-action-inner {
			transition: transform .3s linear;
		}
		.table-action-item {
			width: 50%;
			text-align: center;
			float: left;
			i {
				font-size: 20px!important;
				color: #cccccc;
			}
		}
		.font {
			font-size: 14px;
    		color: #419F7F;
		}
	}
</style>